<template>
  <!-- search start -->
  <div class="search">
    <div class="search_box">
      <div class="search_logo">
        <img src="@/image/pic1.png" alt="" />
      </div>
      <div class="search_input">
        <input type="text" placeholder="搜索商品" ref="search" />
        <div class="input_btn" @click="search">
          <img src="../image/search.png" alt="" />
          <span>搜索</span>
        </div>
      </div>
      <div class="search_cart" @click="$router.push('/cart')">
        <img src="../image/gouwuche.png" alt="" /><span>购物车</span>
      </div>
    </div>
  </div>
  <!-- search end -->
</template>
<script>
export default {
  data() {
    return {
      value: 1,
    };
  },
  methods: {
    search() {
      this.value = this.$refs.search.value;
      console.log(this.value);
      // 搜索成功清空输入框
      this.$refs.search.value = "";
    },
  },
};
</script>
<style  scoped>
@import url("../assets/search.css");
</style>